<template>

  <div>
    <mt-search v-model="keyWords"
    @input="GET_NEWS_LIST({type:'search',title:keyWords})"
     style="height:60px"></mt-search>
      <!-- @keyup.native="search($event)" -->

     <mt-loadmore  :bottom-method="loadBottom" ref="loadmore">
       <div v-for="(item,index) in openNews" :key='index' style="margin:5px 0;">
        <div class="rows" style="border-bottom:1px solid black;height:5%">
          <a style="height:50px;width:100%;display:block">
            <div class="col-xs-8" style="padding:5px 0"  @click="goToComment(item._id)" :dataItem='item'> {{item.title}}</div>
            <div class="col-xs-4" style="height:40px;margin-top:5px"><img :src="`http://localhost:3000/${item.filename}`" style="height:100%;width:90%" @click="goToComment($event)" :dataItem='item'/></div>
          </a>
        </div>

      </div>
    </mt-loadmore>

     <!-- <button @click="get"></button> -->
  </div>
</template>


<script>
  import Vue from 'vue';
  import { Search,Loadmore } from 'mint-ui';

  Vue.component(Search.name, Search,Loadmore.name, Loadmore);

  import {mapActions,mapGetters} from 'vuex';

console.log(mapGetters(['openNews']))
  export default{
    data(){
      return{
          // value:'',
          keyWords:"",
          page:1,
          allLoaded:false

      }

    },
    computed:{
      ...mapGetters(['openNews']),
    },

    methods:{
      ...mapActions(['GET_NEWS_LIST']),
      // get(){
      //   console.log(this.openNews)
      // },
      search(e){
        var val=e.target.value;
        this.GET_NEWS_LIST({title:val});
      },
      goToComment(id){
        // console.log(id,"item");
        this.$router.push({path:"/comment/"+id});
        // console.log(JSON.stringify(e.target.getAttribute("dataItem")))
      },
      loadTop() {
          this.$refs.loadmore.onTopLoaded();
          this.page = 1;
          this.keyWords = "",
          this.GET_NEWS_LIST({type:"search",page:this.page})
      },
      loadBottom() {
          this.$refs.loadmore.onBottomLoaded();
          this.page++;
          this.GET_NEWS_LIST({page:this.page})
      }

    },
    created(){
      this.GET_NEWS_LIST({page:this.page});
    }

  }
// v-model="value"
//         @input='GET_NEWS_LIST({type:"search",title:value})'
</script>
